<script setup>
import  { tool }  from "../tool/index"
import { inject,computed } from "vue"
import { useRouter } from "vue-router"
const router = useRouter()
const active = computed(()=>{
    switch (router.currentRoute.value.name) {
        case "BlogBost":
            return 1
        case "ChangePassword":
            return 2_1
        case "ChangeEmail":
            return 2_2
        case "ModifyData":
            return 3
        default:
            break;
    }
})
const store = inject('store')
const user = store.state.user
const imageUrl = tool.serverPath+"api/app_api/image/download?fileName="
function SwitchPage(key) {
    switch (key) {
        case "BlogBost":
            router.push({ name: `BlogBost` })
            break;
        case "ChangePassword":
            router.push({ name: `ChangePassword` })
            break;
        case "ChangeEmail":
            router.push({ name: `ChangeEmail` })
            break;
        case "ModifyData":
            router.push({ name: `ModifyData` })
            break;
        default:
            break;
    }
}
</script>

<template>
    <el-container class="container">
        <el-header class="header">
            <el-row>
                <el-col :span="2">
                    <el-image :src="imageUrl + user.avatar" fit="cover"></el-image>
                </el-col>
                <el-col :span="22">
                    <div><el-text tag="b" size="large" truncated>{{ user.nickname }}</el-text></div>
                    <span>账号：{{ user.username }}</span>
                    <el-divider direction="vertical" />
                    <span>邮箱：{{ user.email }}</span>
                    <el-divider direction="vertical" />
                    <span>性别：{{ user.gender }}</span>
                    <el-divider direction="vertical" />
                    <span>注册时间：{{ user.created_at }}</span>
                    <div>
                        简介： {{ user.bio }}
                    </div>
                </el-col>
            </el-row>
        </el-header>
        <el-footer class="footer">
            <el-main>
                <el-menu :default-active="active" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                    <el-menu-item @click="SwitchPage(`BlogBost`)" :index="1">博客管理</el-menu-item>
                    <el-sub-menu :index="2">
                        <template #title>安全设置</template>
                        <el-menu-item @click="SwitchPage(`ChangePassword`)" :index="2_1">密码修改</el-menu-item>
                        <el-menu-item @click="SwitchPage(`ChangeEmail`)" :index="2_2">邮箱修改</el-menu-item>
                    </el-sub-menu>
                    <el-menu-item  @click="SwitchPage(`ModifyData`)" :index="3">资料修改</el-menu-item>
                </el-menu>
            </el-main>
            <el-row>
                <el-col :span="24">
                    <RouterView></RouterView>
                </el-col>
            </el-row></el-footer>
    </el-container>
</template>
<style scoped>
.container {
    padding: 0;
    width: 1500px;
    margin: auto;
    margin-top: 15px;
}

.container .header {
    height: 100%;
}

.header .el-row {
    background-color: white;
    padding: 15px;
}

.header .el-row .el-col {
    padding: 5px;
}

.header .el-row .el-col .el-image {
    width: 100px;
    height: 100px;
    border-radius: 50px;
}

.footer {
    height: 100%;
    margin: 0;
    margin-bottom: 105px;
    width: 100%;
}

.footer .el-main {
    margin-top: 10px;
    padding: 0;
    padding-bottom: 10px;
}

.footer .el-main .el-menu {
    border: none;
    margin: 0;
    padding: 0;
}

.footer .el-row {
    padding: 20px;
    background-color: white;
}
</style>